<template>
	<view>
		<navbar title="审批" :autoBack="true"></navbar>
		<scroll-view scroll-y="true" class="scbox">
			<view class="con">
				<view class="con__box">
					<view class="con__name" v-if="item.type==1">
						请假({{item.form.often}}{{item.form.unit}})
					</view>
					<view class="con__name" v-if="item.type==2">
						外出({{item.form.often}}{{item.form.unit}})
					</view>
					<view class="con__name" v-if="item.type==3">
						加班({{item.form.often}}{{item.form.unit}})
					</view>
					<view class="con__name" v-if="item.type==4">
						其他审批
					</view>
					<view class="con__ms">
						<view class="" v-if="item.type==1">
							请假类型: {{item.form.type}}
						</view>
						<view class="" v-if="item.type==2">
							外出类型: {{item.form.type}}
						</view>
						<view class="" v-if="item.type==4">
							审批类型: {{item.form.type}}
						</view>
						<view class="" v-if="item.type==2">
							外出地点: {{item.form.addr}}
						</view>
						<view class="" v-if="item.type!=4">
							<view class="" v-if="item.form">
								开始时间:
								{{$u.timeFormat(item.form.starttime, 'yyyy-mm-dd')}}周{{weeklist[new Date(item.form.starttime).getDay()]}}
								{{$u.timeFormat(item.form.starttime, 'hh:MM')}}
							</view>
							<view class="" v-if="item.form">
								结束时间:
								{{$u.timeFormat(item.form.endtime, 'yyyy-mm-dd')}}周{{weeklist[new Date(item.form.endtime).getDay()]}}
								{{$u.timeFormat(item.form.endtime, 'hh:MM')}}
							</view>
						</view>
						<image src="/static/tool/ybh.png" class="con__ms__status" v-if="item.status==3" mode=""></image>
						<image src="/static/daikuan/spz.png" class="con__ms__status" v-if="item.status==1" mode="">
						</image>
						<image src="/static/tool/ywc.png" class="con__ms__status" v-if="item.status==2" mode=""></image>
					</view>
					<view class="con__item" v-if="item.type==2">
						<view class="con__item__label">
							随行同事
						</view>
						<view class="con__item__val">
							{{item.form.colleagues||'无'}}
						</view>
					</view>
					<view class="con__item" v-if="item.type==2">
						<view class="con__item__label">
							拜访客户
						</view>
						<view class="con__item__val">
							{{item.form.customer||'无'}}
						</view>
					</view>
					<view class="con__item">
						<view class="con__item__label">
							申请人
						</view>
						<view class="con__item__val">
							{{item.username}}
						</view>
					</view>
					<view class="con__item">
						<view class="con__item__label">
							查看他的 <text v-if="item.type==1">请假</text>
							<text v-if="item.type==2">外出</text>
							<text v-if="item.type==3">加班</text>
							<text v-if="item.type==4">其他</text>记录
						</view>
						<image src="/static/personal/more2.png" class="con__item__more" mode=""></image>
					</view>
					<view class="" style="margin: 37rpx 0 29rpx;">
						<titletext title="审批流程"></titletext>
					</view>
					<view class="con__spritem">
						<image :src="URL(item.managerAvatar)" class="con__spritem__tx" mode="aspectFill"></image>
						<view class="" style="flex: 1;">
							<view class="con__spritem__name" v-if="item.status==3">
								{{item.managerName}} 已驳回
							</view>
							<view class="con__spritem__name" v-if="item.status==1">
								{{item.managerName}} 审批中
							</view>
							<view class="con__spritem__name" v-if="item.status==2">
								{{item.managerName}} 已通过
							</view>
							<view class="con__spritem__text" v-if="item.status==3">
								{{item.result_remark}}
							</view>
						</view>
						<view class="">
							<view class="con__spritem__zt" v-if="item.status==1">

							</view>
							<image src="/static/tool/gantan.png" class="con__spritem__gant" mode=""
								v-if="item.status==3"></image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="footer" v-if="item.status==1&&!type">
			<input type="text" class="footer__inp" v-model="form.result_remark" placeholder="快速输入审批意见" />
			<view class="u-flex u-flex-y-center u-flex-between">
				<u-button color="#3262FD"
					:customStyle='{width:"208rpx",height:"87rpx",margin:0,padding:0,borderRadius:"5rpx",fontSize:"24rpx"}'
					:loading="loading" @click="submit(2)" text="同意"></u-button>
				<u-button color="#D5D5D5" hairline plain
					:customStyle='{width:"208rpx",height:"87rpx",margin:0,padding:0,borderRadius:"5rpx",fontSize:"24rpx",color:"#242424"}'
					:loading='loading' @click="submit(3)" text="驳回"></u-button>
				<u-button color="#D5D5D5" hairline plain
					:customStyle='{width:"208rpx",height:"87rpx",margin:0,padding:0,borderRadius:"5rpx",fontSize:"24rpx",color:"#242424"}'>转审</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import sale from '@/api/_sale.js'
	export default {
		data() {
			return {
				status: '',
				id: '',
				item: {},
				weeklist: ['日', '一', '二', '三', '四', '五', '六'],
				form: {
					"id": '',
					"status": '',
					"result_remark": ""
				},
				loading: false,
				type:''
			};
		},
		onLoad(o) {
			this.id = o.id
			this.type=o.type
			this.getinfo()
		},
		methods: {
			async getinfo() {
				let res = await sale.examInfo({
					id: this.id
				})
				if (res.data.code == 1) {
					this.item = res.data.data
					let a = this.item.form_json
					this.item.form = JSON.parse(a)
				}
			},
			async submit(status) {
				this.form.id = this.id
				this.form.status = status
				if (!this.form.result_remark) {
					uni.$u.toast('请输入审批意见')
					return
				}
				let _this = this
				this.loading = true
				let res = await sale.exam(this.form)
				if (res.data.code == 1) {
					uni.$u.toast('审批成功')
					setTimeout(() => {
						_this.loading = false
						_this.getinfo()
					}, 2000)
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.scbox {
		height: calc(100vh - var(--status-bar-height) - 44px - 280rpx);
	}

	.con {
		padding: 20rpx 30rpx;

		&__box {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding-left: 30rpx;
		}

		&__name {
			font-family: PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #010101;
			line-height: 31rpx;
			padding: 45rpx 0 32rpx 9rpx;
		}

		&__title {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #1E1E1E;
			line-height: 26rpx;
			display: flex;
			align-items: center;

			&__line {
				width: 5rpx;
				height: 24rpx;
				background: #3262FD;
				margin-right: 10rpx;
			}
		}

		&__ms {
			width: 610rpx;
			background: #F4F5FA;
			border-radius: 10rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #78797E;
			line-height: 62rpx;
			padding: 10rpx 0 26rpx 24rpx;
			position: relative;

			&__status {
				width: 105rpx;
				height: 93rpx;
				position: absolute;
				top: 65rpx;
				right: 35rpx;
			}
		}

		&__item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 106rpx;
			border-bottom: 2rpx solid #F9F9F9;
			padding-right: 30rpx;

			&__label {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #6D6D6D;
				line-height: 26rpx;
			}

			&__val {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #020202;
				line-height: 26rpx;
			}

			&__more {
				width: 12rpx;
				height: 19rpx;
			}
		}

		&__spritem {
			padding: 0 30rpx 48rpx 0;
			display: flex;
			align-items: center;

			&__tx {
				width: 98rpx;
				height: 98rpx;
				background: #3262FD;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			&__name {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #1E1E1E;
				line-height: 28rpx;
			}

			&__text {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #6D6D6D;
				line-height: 24rpx;
				margin-top: 20rpx;
			}

			&__zt {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				border: 2rpx solid #6D6D6D;
			}

			&__gant {
				width: 42rpx;
				height: 42rpx;
			}
		}
	}

	.bb0 {
		border-bottom: 0;
	}

	.footer {
		width: 690rpx;
		height: 280rpx;
		background: #FFFFFF;
		padding: 0 30rpx;

		&__inp {
			height: 108rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333;
			line-height: 108rpx;
			border-bottom: 4rpx solid #ECE6E6;
			margin-bottom: 32rpx;

			::v-deep.uni-input-placeholder {
				font-size: 28rpx;
				color: #6D6D6D;
			}
		}
	}
</style>